<!DOCTYPE html>
<meta charset="UTF-8">
<div style="padding: 10px; height: 300px;">
	<table id="tg_footer"></table>
</div>
<script type="text/javascript">
	$('#tg_footer').gridtree(
            {
                title : '汇总',
                rownumbers : true,
                animate : true,
                collapsible : false,
                fit:true,
                fitColumns : true,
                border : true,
                method : 'get',
                url : '${rc.contextPath}/assets/ui/jww/demo/testdata/gridtree_data2.json',
                idField : 'id',
                treeField : 'name',
                showFooter : true,
                columns : [ [
                        {
                            field : 'name',
                            title : '任务名称',
                            width : 180
                        },
                        {
                            field : 'persons',
                            title : '人月数',
                            width : 60,
                            align : 'right'
                        },
                        {
                            field : 'begin',
                            title : '开始日期',
                            width : 80
                        },
                        {
                            field : 'end',
                            title : '结束日期',
                            width : 80
                        },
                        {
                            field : 'progress',
                            title : '进度',
                            width : 120,
                            formatter : function(value) {
	                            if (value >= 50 && value < 100) {
		                            var s = '<div style="width:100%;border:1px solid #ccc">' + '<div style="width:'
		                                    + value + '%;background:#AC9515;color:#fff">' + value + '%' + '</div>'
		                            '</div>';
		                            return s;
	                            } else if (value < 50) {
		                            var s = '<div style="width:100%;border:1px solid #ccc">' + '<div style="width:'
		                                    + value + '%;background:#930E3A;color:#fff">' + value + '%' + '</div>'
		                            '</div>';
		                            return s;
	                            } else if (value == 100) {
		                            var s = '<div style="width:100%;border:1px solid #ccc">' + '<div style="width:'
		                                    + value + '%;background:#103EA0;color:#fff">' + value + '%' + '</div>'
		                            '</div>';
		                            return s;
	                            } else {
		                            return '';
	                            }
                            }
                        } ] ]
            });
</script>
